<template>
	<div class="order_data" >
		<div class="order_data_top">
			<router-link to="/">
				<i class="iconfont">&#xe609;</i>
			</router-link>
			<p>
				全部订单<i class="iconfont">&#xe600;</i>
			</p>
		</div>
		<div class="order_data_bottom">
			<ul>
				<li v-for="item in list" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id">
					{{item.txt}}
					<span class="default-span"></span>
				</li>
			</ul>
			<Order_data_one v-if="iscur === 1"></Order_data_one>
			<Order_data_two v-if="iscur === 2"></Order_data_two>
			<Order_data_three v-if="iscur === 3"></Order_data_three>
			<Order_data_four v-if="iscur === 4"></Order_data_four>
			<Order_data_five v-if="iscur === 5"></Order_data_five>
		</div>
		
		<Bottomv :propsurl='arrUrl'></Bottomv>
	</div>
	
</template>

<script>
	import Bottomv from '../default/Bottomv.vue'
	import Order_data_one from './pages/Order_data_one.vue'
	import Order_data_two from './pages/Order_data_two.vue'
	import Order_data_three from './pages/Order_data_three.vue'
	import Order_data_four from './pages/Order_data_four.vue'
	import Order_data_five from './pages/Order_data_five.vue'
	export default{
		name:'Order_data',
		components:{
			Order_data_one,
			Order_data_two,
			Order_data_three,
			Order_data_four,
			Order_data_five,
			Bottomv,
		},
		data(){
			return{
				arrUrl : ['img/img1.png','img/img22.png','img/img3.png'],
				list:[
					{id:1,txt:'全部'},
					{id:2,txt:'待付款'},
					{id:3,txt:'已付款'},
					{id:4,txt:'待评价'},
					{id:5,txt:'退款/售后'},
				],
				iscur : 1//默认选中第一个标题以及第一个组件
			}
		}
	}
</script>

<style scoped>
	.order_data{
		width: 100%;
		overflow: hidden;
	}
	.order_data .order_data_top{
		width: 100%;
		height: 3rem;
		line-height: 3rem;
	}
	.order_data .order_data_top a{
		width: 10%;
		float: left;
		line-height: 3rem;
		text-align: center;
		text-decoration: none;
		color: black;
	}
	.order_data .order_data_top p{
		float: left;
		width: 80%;
		line-height: 3rem;
		text-align: center;
	}
	.order_data .order_data_top p i{
		font-size: 0.5rem;
	}
	/* 尾部 */
	.order_data .order_data_bottom{
		line-height: 3rem;
		width: 100%;
	}
	.order_data .order_data_bottom ul{
		width: 100%;
		line-height: 3rem;
	}
	.order_data .order_data_bottom ul .default{
		color: gold;
	}
	.order_data .order_data_bottom li{
		width: 20%;
		text-align: center;
		float: left;
	}
	
</style>
